<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>vue_one</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
	.active{
		color: red;
	}
	ul{
		overflow: hidden;
	}
	li {
		float: left;
		margin-right: 20px;
	}
</style>
<body>
	<h3>单向绑定</h3>
    <div class="" id="demo">
    	{{ message }}
    </div>
    <div>------------------------------------------------------</div>
    <h3>双向绑定 </h3>
    <div id="deme2">
    	{{ message }}
    	<input type="text" v-model="message">
    	<p>vue实例的message属性 可以改变model的值</p>
    </div>
    <h3>指令学习开始</h3>
    <hr></hr>
	<div id="demo3">
	if指令
		<h3 v-if="yes">我是true</h3>
		<h3 v-if="no">我是False</h3>
		<h3 v-if="name=='asz'">我是{{ name }}</h3>
		<h3 v-if='age==28'>我的年龄是{{ age }}</h3>
	</div>
	<hr>

	<div id="demo4">
	show指令
		<h3 v-show="yes">我是true</h3>
		<h3 v-show="no">我是False</h3>
		<h3 v-show="name=='asz'">我是{{ name }}</h3>
		<h3 v-show='age==28'>我的年龄是{{ age }}</h3>
	</div>

	<hr></hr>

	else指令
	<div id="demo5">
		<h3 v-if="yes">我是true-if</h3>
		<h3 v-else="no">我是False</h3>
		<div>------------------------------------------------------</div>
		<h3 v-show="yes">我是true</h3>
		<h3 v-else="no">我是False</h3>
	</div>

	<hr></hr>
	for循环
	<div id="demo6">
		<table>
			<thead>
				<tr>	
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in people">
					<td>{{ item.name }}</td>
					<td>{{ item.age }}</td>
					<td>{{ item.sex }}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<hr></hr>
	bind绑定属性
	<div id="demo7">
		<ul  >
			<li v-for="item in count">
				<a href="javascript:void(0)" v-bind:class="new===item?'active':''">{{ item +1 }}</a>
			</li>
		</ul>
	</div>
	<hr></hr>
	<div id="demo8">
		<input type="text" v-model="msg">
		<input type="button" v-on:click="wucan" value="无参">
		<input type="button" v-on:click="youcan('我是demo')" value="有参">
	</div>
	<hr>
	缩写语法1
	<div id="demo9">
		<a href="javascript:void(0)" :class="msg===3?'active':''">缩写</a>
	</div>
	<hr>
	缩写语法2
	<div id="demo10">
		<button @click="wucan" >缩写</button> 
	</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	/*缩写语法2*/
	var jtmp=new Vue({
		el:"#demo10",
		data:{
			msg:3,
		},
		methods:{
			wucan:function () {
				alert(this.msg);
			},
		}
	})
	/*缩写语法1*/
	var htmp=new Vue({
		el:"#demo9",
		data:{
			msg:3,
		}
	})
	/*v-on绑定*/
	var gtmp=new Vue({
		el:"#demo8",
		data:{
			msg:"aaaaaaaaaaaa"
		},
		methods:{
			wucan:function () {
				alert(this.msg);
			},
			youcan:function (argument) {
				alert(argument);
			},
		}
	})
	/*v-bing绑定*/
	var ftmp=new Vue({
		el:"#demo7",
		data:{
			count:10,
			new:5,
		},
	})
	/*单向绑定开始*/
	var msgModel={
		message:"我是DEMO"
	}
	var atmp=new Vue({
		el:"#demo",
		data:msgModel,
	})
    /*双向绑定开始*/
	var msgMode2={
		message:"我是DEMO"
	}
	var btmp=new Vue({
		el:"#deme2",
		data:msgMode2,
	})
	/*指令学习开始*/
	/*if*/
	var ctmp=new Vue({
		el:"#demo3",
		data:{
			yes:true,
			no:false,
			name:"jike",
			age:28,
		}
	})
	/*show*/
	var dtmp=new Vue({
		el:"#demo4",
		data:{
			yes:true,
			no:false,
			name:"jike",
			age:28,
		}
	})
	/*dtmp.no=true;*/
	/*else*/
	var etmp=new Vue({
		el:"#demo5",
		data:{
			yes:true,
			no:false,
			name:"jike",
			age:28,
		}
	})
	/*for循环*/
	var ftmp=new Vue({
		el:"#demo6",
		data:{
			people:[
				{name:"jeck",age:18,sex:"男"},
				{name:"jeck",age:18,sex:"男"},
				{name:"jeck",age:18,sex:"男"},
				{name:"jeck",age:18,sex:"男"},
				{name:"jeck",age:18,sex:"男"},
				{name:"jeck",age:18,sex:"男"},
				{name:"jeck",age:18,sex:"男"},
			]
		}
	})
</script>
</html>